<template>
    <div :style="{width:echartsConfig.width||'100%',height:echartsConfig.height||'500px'}">

    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    props: {
        echartsConfig: {
            default () {
                return {}
            },
            type: Object
        }
    },
    data () {
        return {
            chart: null
        }
    },
    watch: {
        'echartsConfig.options': {
            handler () {
                this.$nextTick(() => {
                    this.init();
                })
            },
            deep: true,
            immediate: true
        }
    },
    mounted () {
        window.addEventListener("resize", this.resize);
        this.$once('hook:beforeDestroy', () => {
            window.removeEventListener("resize", this.resize);
        })
    },
    methods: {
        init () {
            if (!this.chart) {
                this.chart = echarts.init(this.$el);
                this.echartsConfig.options && this.chart.setOption(this.echartsConfig.options);
            } else {
                this.options && this.chart.setOption(this.echartsConfig.options);
            }
        },
        resize () {
            this.chart.resize();
        }
    }
}
</script>
